<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>飞机大战 - 经典射击游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        game: ['"Press Start 2P"', 'cursive', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .game-shadow {
                box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
            }
            .game-glow {
                filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
    
    <style>
        /* 导入游戏风格字体 */
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        body {
            overscroll-behavior: contain;
            touch-action: manipulation;
            background-color: #0B1120;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 20%);
        }
        
        /* 游戏画布样式 */
        #gameCanvas {
            display: block;
            background-color: #0F172A;
            background-image: 
                linear-gradient(rgba(15, 23, 42, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(15, 23, 42, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }
        
        /* 游戏控制杆样式 */
        .joystick-outer {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
        }
        
        .joystick-inner {
            background-color: rgba(59, 130, 246, 0.5);
            transition: all 0.1s ease-out;
        }
        
        /* 游戏动画 */
        @keyframes explosion {
            0% { transform: scale(0.1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: scale(2); opacity: 0; }
        }
        
        .explosion {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, #EF4444, #F59E0B, transparent);
            animation: explosion 0.5s forwards;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4 text-light overflow-hidden">
    <!-- 游戏容器 -->
    <div class="relative w-full max-w-md mx-auto flex flex-col items-center">
        <!-- 游戏标题 -->
        <h1 class="text-[clamp(1.5rem,5vw,2rem)] font-game text-primary mb-2 text-center game-glow">
            飞机大战
        </h1>
        
        <!-- 游戏信息栏 -->
        <div class="w-full flex justify-between items-center mb-2 px-2">
            <div class="flex items-center gap-2">
                <i class="fa fa-star text-yellow-400"></i>
                <span id="score" class="font-game text-lg">0</span>
            </div>
            <div class="flex items-center gap-2">
                <i class="fa fa-clock-o text-green-400"></i>
                <span id="time" class="font-game text-lg">0</span>
            </div>
        </div>
        
        <!-- 游戏画布容器 -->
        <div class="relative w-full aspect-[3/4] rounded-lg overflow-hidden game-shadow">
            <canvas id="gameCanvas" class="w-full h-full"></canvas>
            
            <!-- 开始游戏屏幕 -->
            <div id="startScreen" class="absolute inset-0 bg-dark/80 backdrop-blur-sm flex flex-col items-center justify-center z-10">
                <div class="text-center p-6 rounded-xl bg-dark/60 max-w-xs">
                    <h2 class="text-2xl font-game text-primary mb-6 game-glow">准备开始</h2>
                    <p class="mb-6 text-light/80">控制飞机左右移动，躲避敌机，收集道具</p>
                    <button id="startBtn" class="bg-primary hover:bg-primary/80 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105 active:scale-95 game-shadow">
                        开始游戏
                    </button>
                </div>
            </div>
            
            <!-- 游戏结束屏幕 -->
            <div id="gameOverScreen" class="absolute inset-0 bg-dark/80 backdrop-blur-sm flex flex-col items-center justify-center z-10 hidden">
                <div class="text-center p-6 rounded-xl bg-dark/60 max-w-xs">
                    <h2 class="text-2xl font-game text-danger mb-3 game-glow">游戏结束</h2>
                    <p class="mb-2">最终得分: <span id="finalScore" class="font-game text-primary">0</span></p>
                    <p class="mb-6">游戏时间: <span id="finalTime" class="font-game text-primary">0</span>秒</p>
                    <button id="restartBtn" class="bg-secondary hover:bg-secondary/80 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105 active:scale-95 game-shadow">
                        再来一次
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动设备控制器 -->
        <div class="w-full mt-4 flex justify-between px-4 md:hidden">
            <!-- 左侧控制区 -->
            <div class="relative w-24 h-24 joystick-outer rounded-full" id="leftJoystick">
                <div class="joystick-inner absolute top-1/2 left-1/2 w-12 h-12 rounded-full transform -translate-x-1/2 -translate-y-1/2" id="leftStick"></div>
            </div>
            
            <!-- 右侧控制区 -->
            <div class="relative w-24 h-24 joystick-outer rounded-full" id="rightJoystick">
                <div class="joystick-inner absolute top-1/2 left-1/2 w-12 h-12 rounded-full transform -translate-x-1/2 -translate-y-1/2" id="rightStick"></div>
            </div>
        </div>
        
        <!-- 游戏说明 -->
        <div class="mt-4 text-sm text-light/60 text-center max-w-md">
            <p class="mb-2">移动端: 使用屏幕下方的虚拟摇杆或者滑动屏幕 <kbd class="px-2 py-1 bg-dark rounded text-xs">←</kbd> <kbd class="px-2 py-1 bg-dark rounded text-xs">→</kbd> </p>
        </div>
    </div>

    <script>
        // 游戏主类
        class PlaneGame {
            constructor() {
                // 获取画布和上下文
                this.canvas = document.getElementById('gameCanvas');
                this.ctx = this.canvas.getContext('2d');
                
                // 设置画布尺寸
                this.resizeCanvas();
                window.addEventListener('resize', () => this.resizeCanvas());
                
                // 游戏状态
                this.gameRunning = false;
                this.score = 0;
                this.gameTime = 0;
                this.lastTime = 0;
                this.enemySpeedMultiplier = 1;
                
                // 玩家飞机属性
                this.player = {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 60,
                    speed: 8,
                    normalSize: { width: 50, height: 60 },
                    smallSize: { width: 35, height: 42 },
                    isSmall: false,
                    invincible: false,
                    invincibleTime: 0
                };
                
                // 游戏对象数组
                this.enemies = [];
                this.powerUps = [];
                this.explosions = [];
                
                // 事件监听
                this.keys = {};
                this.initEventListeners();
                
                // DOM元素
                this.scoreElement = document.getElementById('score');
                this.timeElement = document.getElementById('time');
                this.startScreen = document.getElementById('startScreen');
                this.gameOverScreen = document.getElementById('gameOverScreen');
                this.finalScoreElement = document.getElementById('finalScore');
                this.finalTimeElement = document.getElementById('finalTime');
                this.startBtn = document.getElementById('startBtn');
                this.restartBtn = document.getElementById('restartBtn');
                
                // 绑定按钮事件
                this.startBtn.addEventListener('click', () => this.startGame());
                this.restartBtn.addEventListener('click', () => this.startGame());
                
                // 初始化游戏对象
                this.resetGame();
            }
            
            // 调整画布尺寸
            resizeCanvas() {
                const container = this.canvas.parentElement;
                this.canvas.width = container.clientWidth;
                this.canvas.height = container.clientHeight;
                
                // 重新定位玩家
                if (this.gameRunning) {
                    this.player.x = this.canvas.width / 2 - this.player.width / 2;
                }
            }
            
            // 初始化事件监听
            initEventListeners() {
                // 键盘控制
                window.addEventListener('keydown', (e) => {
                    this.keys[e.key] = true;
                });
                
                window.addEventListener('keyup', (e) => {
                    this.keys[e.key] = false;
                });
                
                // 触摸控制 - 左侧摇杆
                const leftJoystick = document.getElementById('leftJoystick');
                const leftStick = document.getElementById('leftStick');
                this.setupJoystick(leftJoystick, leftStick, -1);
                
                // 触摸控制 - 右侧摇杆
                const rightJoystick = document.getElementById('rightJoystick');
                const rightStick = document.getElementById('rightStick');
                this.setupJoystick(rightJoystick, rightStick, 1);
                
                // 触摸滑动控制整个屏幕
                let touchStartX = 0;
                let playerStartX = 0;
                
                this.canvas.addEventListener('touchstart', (e) => {
                    if (!this.gameRunning) return;
                    touchStartX = e.touches[0].clientX;
                    playerStartX = this.player.x;
                    e.preventDefault();
                }, { passive: false });
                
                this.canvas.addEventListener('touchmove', (e) => {
                    if (!this.gameRunning) return;
                    const touchX = e.touches[0].clientX;
                    const diffX = touchX - touchStartX;
                    this.player.x = playerStartX + diffX;
                    this.keepPlayerInBounds();
                    e.preventDefault();
                }, { passive: false });
            }
            
            // 设置虚拟摇杆
            setupJoystick(joystick, stick, direction) {
                let isDragging = false;
                const joystickRect = joystick.getBoundingClientRect();
                const centerX = joystickRect.width / 2;
                const centerY = joystickRect.height / 2;
                const maxDistance = joystickRect.width / 3;
                
                // 触摸开始
                joystick.addEventListener('touchstart', (e) => {
                    isDragging = true;
                    e.preventDefault();
                }, { passive: false });
                
                // 触摸移动
                joystick.addEventListener('touchmove', (e) => {
                    if (!isDragging || !this.gameRunning) return;
                    
                    // 移动摇杆视觉效果
                    const touch = e.touches[0];
                    const rect = joystick.getBoundingClientRect();
                    const x = touch.clientX - rect.left;
                    const y = touch.clientY - rect.top;
                    
                    const dx = x - centerX;
                    const dy = y - centerY;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance > maxDistance) {
                        const scale = maxDistance / distance;
                        stick.style.left = `${centerX + dx * scale}px`;
                        stick.style.top = `${centerY + dy * scale}px`;
                    } else {
                        stick.style.left = `${x}px`;
                        stick.style.top = `${y}px`;
                    }
                    
                    // 移动玩家飞机
                    this.player.x += direction * this.player.speed;
                    this.keepPlayerInBounds();
                    
                    e.preventDefault();
                }, { passive: false });
                
                // 触摸结束
                ['touchend', 'touchcancel'].forEach(event => {
                    joystick.addEventListener(event, () => {
                        isDragging = false;
                        // 重置摇杆位置
                        stick.style.left = `${centerX}px`;
                        stick.style.top = `${centerY}px`;
                    });
                });
            }
            
            // 确保玩家在画布范围内
            keepPlayerInBounds() {
                if (this.player.x < 0) {
                    this.player.x = 0;
                } else if (this.player.x + this.player.width > this.canvas.width) {
                    this.player.x = this.canvas.width - this.player.width;
                }
            }
            
            // 开始游戏
            startGame() {
                this.resetGame();
                this.gameRunning = true;
                this.startScreen.classList.add('hidden');
                this.gameOverScreen.classList.add('hidden');
                requestAnimationFrame((timestamp) => this.gameLoop(timestamp));
            }
            
            // 重置游戏
            resetGame() {
                this.score = 0;
                this.gameTime = 0;
                this.lastTime = 0;
                this.enemySpeedMultiplier = 1;
                this.enemies = [];
                this.powerUps = [];
                this.explosions = [];
                
                // 重置玩家
                this.player.x = this.canvas.width / 2 - this.player.normalSize.width / 2;
                this.player.y = this.canvas.height - this.player.normalSize.height - 20;
                this.player.width = this.player.normalSize.width;
                this.player.height = this.player.normalSize.height;
                this.player.isSmall = false;
                this.player.invincible = false;
                this.player.invincibleTime = 0;
                
                // 更新UI
                this.scoreElement.textContent = '0';
                this.timeElement.textContent = '0';
            }
            
            // 游戏结束
            gameOver() {
                this.gameRunning = false;
                this.finalScoreElement.textContent = this.score;
                this.finalTimeElement.textContent = Math.floor(this.gameTime);
                this.gameOverScreen.classList.remove('hidden');
            }
            
            // 创建敌机
            spawnEnemy() {
                const enemyTypes = [
                    { width: 40, height: 40, color: '#EF4444' },
                    { width: 35, height: 35, color: '#F59E0B' },
                    { width: 45, height: 45, color: '#EC4899' }
                ];
                
                const type = enemyTypes[Math.floor(Math.random() * enemyTypes.length)];
                const x = Math.random() * (this.canvas.width - type.width);
                
                this.enemies.push({
                    x,
                    y: -type.height,
                    width: type.width,
                    height: type.height,
                    color: type.color,
                    speed: 2 + Math.random() * 2 * this.enemySpeedMultiplier,
                    hitbox: {
                        x: x + 5,
                        y: -type.height + 5,
                        width: type.width - 10,
                        height: type.height - 10
                    }
                });
            }
            
            // 创建缩放道具
            spawnPowerUp() {
                const size = 30;
                const x = Math.random() * (this.canvas.width - size);
                
                this.powerUps.push({
                    x,
                    y: -size,
                    width: size,
                    height: size,
                    speed: 3,
                    color: '#8B5CF6'
                });
            }
            
            // 创建爆炸效果
            createExplosion(x, y, size) {
                this.explosions.push({
                    x,
                    y,
                    size,
                    life: 1,
                    maxLife: 1
                });
            }
            
            // 更新游戏对象
            update(deltaTime) {
                // 更新游戏时间
                this.gameTime += deltaTime / 1000;
                this.timeElement.textContent = Math.floor(this.gameTime);
                
                // 每10秒增加敌机速度
                if (Math.floor(this.gameTime) % 10 === 0 && this.gameTime > 0) {
                    this.enemySpeedMultiplier = 1 + (this.gameTime / 60);
                }
                
                // 随机生成敌机
                if (Math.random() < 0.02 * deltaTime / 16) {
                    this.spawnEnemy();
                }
                
                // 随机生成缩放道具
                if (Math.random() < 0.003 * deltaTime / 16) {
                    this.spawnPowerUp();
                }
                
                // 更新玩家无敌状态
                if (this.player.invincible) {
                    this.player.invincibleTime -= deltaTime;
                    if (this.player.invincibleTime <= 0) {
                        this.player.invincible = false;
                    }
                }
                
                // 更新缩放效果
                if (this.player.isSmall && this.gameTime % 10 > 8) {
                    // 缩放效果结束前2秒开始闪烁提醒
                    this.player.isSmall = Math.floor(this.gameTime * 5) % 2 === 0;
                    this.player.width = this.player.isSmall ? 
                        this.player.smallSize.width : this.player.normalSize.width;
                    this.player.height = this.player.isSmall ? 
                        this.player.smallSize.height : this.player.normalSize.height;
                } else if (this.gameTime % 10 > 9) {
                    // 10秒后恢复正常大小
                    this.player.isSmall = false;
                    this.player.width = this.player.normalSize.width;
                    this.player.height = this.player.normalSize.height;
                }
                
                // 玩家控制
                if (this.keys['ArrowLeft'] || this.keys['a']) {
                    this.player.x -= this.player.speed;
                }
                if (this.keys['ArrowRight'] || this.keys['d']) {
                    this.player.x += this.player.speed;
                }
                this.keepPlayerInBounds();
                
                // 更新敌机
                for (let i = this.enemies.length - 1; i >= 0; i--) {
                    const enemy = this.enemies[i];
                    enemy.y += enemy.speed;
                    enemy.hitbox.y += enemy.speed;
                    
                    // 移除超出屏幕的敌机
                    if (enemy.y > this.canvas.height) {
                        this.enemies.splice(i, 1);
                        this.score += 10; // 成功躲避敌机加分
                        this.scoreElement.textContent = this.score;
                    }
                }
                
                // 更新道具
                for (let i = this.powerUps.length - 1; i >= 0; i--) {
                    const powerUp = this.powerUps[i];
                    powerUp.y += powerUp.speed;
                    
                    // 移除超出屏幕的道具
                    if (powerUp.y > this.canvas.height) {
                        this.powerUps.splice(i, 1);
                    }
                }
                
                // 更新爆炸效果
                for (let i = this.explosions.length - 1; i >= 0; i--) {
                    const explosion = this.explosions[i];
                    explosion.life -= deltaTime / 500; // 爆炸持续0.5秒
                    
                    if (explosion.life <= 0) {
                        this.explosions.splice(i, 1);
                    }
                }
                
                // 碰撞检测 - 敌机
                this.checkCollisions();
                
                // 碰撞检测 - 道具
                this.checkPowerUpCollisions();
            }
            
            // 检测玩家与敌机的碰撞
            checkCollisions() {
                if (this.player.invincible) return;
                
                for (let i = this.enemies.length - 1; i >= 0; i--) {
                    const enemy = this.enemies[i];
                    
                    if (this.isColliding(this.player, enemy.hitbox)) {
                        // 创建爆炸效果
                        this.createExplosion(
                            this.player.x + this.player.width / 2,
                            this.player.y + this.player.height / 2,
                            this.player.width * 1.5
                        );
                        
                        this.enemies.splice(i, 1);
                        this.gameOver();
                        return;
                    }
                }
            }
            
            // 检测玩家与道具的碰撞
            checkPowerUpCollisions() {
                for (let i = this.powerUps.length - 1; i >= 0; i--) {
                    const powerUp = this.powerUps[i];
                    
                    if (this.isColliding(this.player, powerUp)) {
                        // 创建收集效果
                        this.createExplosion(
                            powerUp.x + powerUp.width / 2,
                            powerUp.y + powerUp.height / 2,
                            powerUp.width
                        );
                        
                        // 应用缩放效果
                        this.player.isSmall = true;
                        this.player.width = this.player.smallSize.width;
                        this.player.height = this.player.smallSize.height;
                        
                        // 加分
                        this.score += 50;
                        this.scoreElement.textContent = this.score;
                        
                        this.powerUps.splice(i, 1);
                    }
                }
            }
            
            // 碰撞检测函数
            isColliding(a, b) {
                return a.x < b.x + b.width &&
                       a.x + a.width > b.x &&
                       a.y < b.y + b.height &&
                       a.y + a.height > b.y;
            }
            
            // 绘制玩家飞机
            drawPlayer() {
                const { x, y, width, height } = this.player;
                
                this.ctx.save();
                
                // 无敌状态闪烁效果
                if (this.player.invincible && Math.floor(Date.now() / 100) % 2 === 0) {
                    this.ctx.globalAlpha = 0.5;
                }
                
                // 绘制飞机主体
                this.ctx.fillStyle = '#3B82F6';
                this.ctx.beginPath();
                this.ctx.moveTo(x + width / 2, y);
                this.ctx.lineTo(x, y + height);
                this.ctx.lineTo(x + width, y + height);
                this.ctx.closePath();
                this.ctx.fill();
                
                // 绘制飞机细节
                this.ctx.fillStyle = '#93C5FD';
                this.ctx.beginPath();
                this.ctx.moveTo(x + width / 4, y + height / 4);
                this.ctx.lineTo(x + width / 2, y + height / 2);
                this.ctx.lineTo(x + 3 * width / 4, y + height / 4);
                this.ctx.closePath();
                this.ctx.fill();
                
                // 绘制喷射器
                this.ctx.fillStyle = '#10B981';
                this.ctx.beginPath();
                this.ctx.ellipse(
                    x + width / 2, 
                    y + height, 
                    width / 4, 
                    height / 6, 
                    0, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
                
                this.ctx.restore();
            }
            
            // 绘制敌机
            drawEnemies() {
                this.enemies.forEach(enemy => {
                    this.ctx.save();
                    
                    // 绘制敌机主体
                    this.ctx.fillStyle = enemy.color;
                    this.ctx.beginPath();
                    this.ctx.moveTo(enemy.x + enemy.width / 2, enemy.y + enemy.height);
                    this.ctx.lineTo(enemy.x, enemy.y);
                    this.ctx.lineTo(enemy.x + enemy.width, enemy.y);
                    this.ctx.closePath();
                    this.ctx.fill();
                    
                    // 绘制敌机细节
                    const detailColor = this.darkenColor(enemy.color, 30);
                    this.ctx.fillStyle = detailColor;
                    this.ctx.beginPath();
                    this.ctx.rect(
                        enemy.x + enemy.width / 4,
                        enemy.y + enemy.height / 3,
                        enemy.width / 2,
                        enemy.height / 3
                    );
                    this.ctx.fill();
                    
                    this.ctx.restore();
                });
            }
            
            // 绘制道具
            drawPowerUps() {
                this.powerUps.forEach(powerUp => {
                    this.ctx.save();
                    
                    // 绘制缩放道具
                    this.ctx.fillStyle = powerUp.color;
                    this.ctx.beginPath();
                    this.ctx.arc(
                        powerUp.x + powerUp.width / 2,
                        powerUp.y + powerUp.height / 2,
                        powerUp.width / 2,
                        0,
                        Math.PI * 2
                    );
                    this.ctx.fill();
                    
                    // 绘制道具图标
                    this.ctx.fillStyle = '#FFFFFF';
                    this.ctx.font = `${powerUp.width * 0.6}px Arial`;
                    this.ctx.textAlign = 'center';
                    this.ctx.textBaseline = 'middle';
                    this.ctx.fillText('-', powerUp.x + powerUp.width / 2, powerUp.y + powerUp.height / 2);
                    
                    this.ctx.restore();
                });
            }
            
            // 绘制爆炸效果
            drawExplosions() {
                this.explosions.forEach(explosion => {
                    this.ctx.save();
                    
                    const alpha = explosion.life / explosion.maxLife;
                    this.ctx.globalAlpha = alpha;
                    
                    const gradient = this.ctx.createRadialGradient(
                        explosion.x, explosion.y, 0,
                        explosion.x, explosion.y, explosion.size * (1 - explosion.life / explosion.maxLife)
                    );
                    gradient.addColorStop(0, 'rgba(239, 68, 68, 0.8)');
                    gradient.addColorStop(0.5, 'rgba(245, 158, 11, 0.6)');
                    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
                    
                    this.ctx.fillStyle = gradient;
                    this.ctx.beginPath();
                    this.ctx.arc(
                        explosion.x,
                        explosion.y,
                        explosion.size * (1 - explosion.life / explosion.maxLife),
                        0,
                        Math.PI * 2
                    );
                    this.ctx.fill();
                    
                    this.ctx.restore();
                });
            }
            
            // 绘制游戏
            draw() {
                // 清空画布
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 绘制背景网格动效
                this.drawBackground();
                
                // 绘制游戏元素
                this.drawEnemies();
                this.drawPowerUps();
                this.drawPlayer();
                this.drawExplosions();
            }
            
            // 绘制背景动效
            drawBackground() {
                const time = Date.now() / 1000;
                const gridSize = 20;
                
                this.ctx.strokeStyle = 'rgba(59, 130, 246, 0.1)';
                this.ctx.lineWidth = 1;
                
                // 绘制移动的网格线
                for (let y = 0; y < this.canvas.height; y += gridSize) {
                    const offsetY = (y + time * 5) % gridSize;
                    this.ctx.beginPath();
                    this.ctx.moveTo(0, offsetY);
                    this.ctx.lineTo(this.canvas.width, offsetY);
                    this.ctx.stroke();
                }
            }
            
            // 颜色调暗辅助函数
            darkenColor(color, percent) {
                // 简单的颜色调暗实现
                const num = parseInt(color.slice(1), 16);
                const r = Math.max(0, (num >> 16) - percent);
                const g = Math.max(0, ((num >> 8) & 0xFF) - percent);
                const b = Math.max(0, (num & 0xFF) - percent);
                return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
            }
            
            // 游戏主循环
            gameLoop(timestamp) {
                if (!this.lastTime) this.lastTime = timestamp;
                const deltaTime = timestamp - this.lastTime;
                this.lastTime = timestamp;
                
                if (this.gameRunning) {
                    this.update(deltaTime);
                    this.draw();
                    requestAnimationFrame((ts) => this.gameLoop(ts));
                }
            }
        }
        
        // 当页面加载完成后初始化游戏
        window.addEventListener('load', () => {
            const game = new PlaneGame();
        });
    </script>
</body>
</html>
